<template>
  <div class="b-pie">
    <div class="b-title">{{title}}</div>
    <div ref="chart" class="b-chart"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';

  export default {
    name: "b-pie",
    props: {
      title:{
        type:String,
        default:'年巡检任务'
      }
    },
    components: {},
    data() {
      return {
        chart:null,
        chartOption:{}
      }
    },
    methods: {
      changeChart(){
        this.chart.setOption({
          title: {
            text: '0条',
            x: 'center',
            y: 'bottom',
            textStyle: {
              fontWeight: 'normal',
              color: '#A1D6E6',
              fontSize: '20'
            }
          },
          color: ['#A1D6E6','#0C1121'],
          legend: {
            show: false,
            itemGap: 12,
            data: ['0%', '100%']
          },
          grid:{
            left:0,
            top:20,
            right:0,
            bottom:20
          },
          series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['50%', '66%'],
            center: ['50%', '46%'],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                labelLine: {
                  show: false
                }
              }
            },
            data: [{
              value: 0,
              name: '0%',
              label: {
                normal: {
                  textStyle: {
                    fontWeight: 'normal',
                    color: '#fff',
                    fontSize: '20'
                  },
                  position:'center'
                }
              }
            }, {
              name: '100%',
              value: 100,
              label: {
                normal: {
                  show:false
                }
              }
            }]
          }]
        });
      }
    },
    created(){},
    mounted(){
      this.chart=echarts.init(this.$refs.chart);
      this.changeChart()
    },
    beforeDestroy(){
      if(this.chart)
        this.chart.dispose();
      this.chart=null;
    }
  }
</script>

<style lang="scss" scoped>

  .b{

    &-pie{
      padding: 20px 22px;
      background: $border-1;
      border-radius: 10px;

      display: flex;
      flex-direction: column;
    }


    &-title{
      font-weight: bold;
      font-size: 1.1rem;
      white-space: nowrap;


    }

    &-chart{
      flex: auto;
    }
  }

</style>